<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>帖子浏览</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='stylesheet' type='text/css' href='/static/view/css/posts.css'/>
        <link rel='stylesheet' type='text/css' href='/static/view/css/head.css'/>
        <link rel='stylesheet' type='text/css' href='/static/view/css/common.css'/>
        <script type='text/javascript' src='/static/ckeditor/ckeditor.js'></script>
    </head>
    <body>
        <include file="public:header"/>
        <p style="font-size:12px;margin: 0px auto 10px 15px;"><a href="/User/forum/forum">论坛</a> &gt; <a href="/User/forum/forumDetail?id={$forum.id}">{$forum.parent_forum_name}</a> &gt; <a href="/User/forum/forumDetail?id={$forum.id}">{$forum.forum_name}</a> &gt; {$posts.theme}</p>
        <div class='posts-body'>
            <!--主题帖子-->
            <div class="posts-div">
                <div class="author" style="padding-top: 30px;"> 
                    <table border="0px" width="200px" cellpadding="3">
                        <tr align="center"><td colspan="3"><a href="/User/user/userInfo?id={$author.id}">{$author.username}</a></td></tr>
                        <tr align="center"><td colspan="3" align="center"><img src="{$author.head_img}" height="109px"/></td></tr>
                        <tr align="center"><td colspan="3">积分　　　　{$author.credits}</td></tr>
                        <tr align="center"><td colspan="3">{$author.role}</td></tr>
                    </table>
                </div>
                <div class="posts-content">
                    <form action="/User/posts/editPosts" method="post">
                        <h3>{$posts.theme}</h3><br/>
                        <div style="border-bottom:1px dashed #BDD7E3"></div><br/>
                        <div style="height: auto;">{$posts.author} 发表于 {$posts.dateline} | 跟帖数：{$reply_count} | 楼主</div><br/>
                        <div class="content-div" style="height: auto;min-height: 100px">
                            <textarea style="display: none" class="content" name="content" rows="5" cols="50"></textarea>
                            <span class="content-now">{$posts.content}</span><empty name="posts.mood">{$postsDetail.mood}<else/><img src="{$posts.mood}"/></empty>
                        </div><br/>
                        <input name="posts_id" value="{$posts.id}" type="hidden"/>
                        <input name="author_id" value="{$author.id}" type="hidden"/>
                        <input name="forum_id" value="{$forum.id}" type="hidden"/>
                        <div class="btn-select"><if condition="$posts.author eq $_SESSION['userInfo']['username']"><input class="edit" type="button" value="编辑">&nbsp;<a href="#reply">回复</a><else/><a href="#reply">回复</a></if></div><br/><!--连接到锚点-->
                    </form>
                    <div style="border-bottom:1px dashed #BDD7E3"></div><br/>
                </div>
            </div>
            <!--回复列表-->
            <volist name="reply" id="reply">
                <div style="border-bottom:1px solid #BDD7E3"></div>
                <div class="posts-div">
                        <div class="author" style="padding-top: 30px;">
                            <table border="0px" width="200px" cellpadding="3">
                                <tr align="center"><td colspan="3"><a href="/User/user/userInfo?id={$reply.u_id}">{$reply.username}</a></td></tr>
                                <tr align="center"><td colspan="3" align="center"><img src="{$reply.head_img}" height="109px"/></td></tr>
                                <tr align="center"><td colspan="3">积分　　　　{$reply.credits}</td></tr>
                                <tr align="center"><td colspan="3">{$reply.role}</td></tr>
                            </table>
                        </div>
                        <div class="posts-content">
                            <form action="/User/posts/editReply" method="post">
                                <div style="height: auto;">{$reply.author} 发表于 {$reply.dateline} | <input readonly name="id" value="{$reply.r_id}#" style="width: 50px;border: 0"/></div><br/>
                                <div style="border-bottom:1px dashed silver"></div><br/>
                                <input name="posts_id" value="{$posts.id}" type="hidden"/>
                                <input name="author_id" value="{$author.id}" type="hidden"/>
                                <input name="forum_id" value="{$forum.id}" type="hidden"/>
                                <div class="content-div" style="height: auto;min-height: 150px">
                                    <textarea rows="5" cols="50" name="content" style="display: none" class="content"></textarea><span class="content-now" style="display: block">{$reply.content}</span><empty name="reply.mood">{$reply.mood}<else/><img src="{$reply.mood}"/></empty>
                                </div><br/>
                                <div class="btn-select"><if condition="$reply.author eq $_SESSION['userInfo']['username']"><input class="edit" type="button" value="编辑">&nbsp;<a href="#reply">回复</a><else/><a href="#reply">回复</a></if></div><br/>
                                <div style="border-bottom:1px dashed #BDD7E3"></div><br/>
                            </form>
                        </div>
                </div>
            </volist>
            <div class="posts-div" style="background-color: white;"><div style="height: 35px;width:217px;background-color:#E8F0F7;float: left; "></div><div style="padding-left:10px;float:left;">{$page}</div></div>
            <!--发表回复-->
            <div style="border-bottom:1px solid #BDD7E3"></div>
            <div class="posts-div">
                <div class="author" style="padding-top: 30px;">
                   <table border="0px" width="200px" cellpadding="3">
                        <tr align="center"><td colspan="3"><php>if($_SESSION['userInfo']){echo '<a href=/User/user/userInfo?id='.$_SESSION['userInfo']['id'].'>'.$_SESSION['userInfo']['username'].'</a>';}else{echo '游客';}</php></td></tr>
                        <tr align="center"><td colspan="3" align="center"><php>if($_SESSION['userInfo']){echo '<img src='.$_SESSION["userInfo"]["head_img"].' height=109px />';}else{echo "<img src='/static/view/image/head-img/default.jpg' height='109px'/>";}</php></td></tr>
                        <tr align="center"><td colspan="3">积分　　　　<php>if($_SESSION['userInfo']){echo $_SESSION['userInfo']['credits'];}else{echo 0;}</php></td></tr>
                        <tr align="center"><td colspan="3"><php>if($_SESSION['userInfo']){echo $_SESSION['userInfo']['role'];}else{echo '游客';}</php></td></tr>
                    </table>
                </div>
                <div class="posts-content"><a name="reply"></a>
                    <form action="/User/posts/submitReply" method="post" id="submit_reply">
                        <h3>发表回复</h3>
                        <div style="margin-top:10px;border: 0px solid silver;border-bottom: 0px;">
                            <input name="mood" type="radio" value="/static/view/image/mood/001.gif"/><img src="/static/view/image/mood/001.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/002.gif"/><img src="/static/view/image/mood/002.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/003.gif"/><img src="/static/view/image/mood/003.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/004.gif"/><img src="/static/view/image/mood/004.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/005.gif"/><img src="/static/view/image/mood/005.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/006.gif"/><img src="/static/view/image/mood/006.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/007.gif"/><img src="/static/view/image/mood/007.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/008.gif"/><img src="/static/view/image/mood/008.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/009.gif"/><img src="/static/view/image/mood/009.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/010.gif"/><img src="/static/view/image/mood/010.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/011.gif"/><img src="/static/view/image/mood/011.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/012.gif"/><img src="/static/view/image/mood/012.gif"/>
                            <input name="mood" type="radio" value="/static/view/image/mood/013.gif"/><img src="/static/view/image/mood/013.gif"/>
                            <span style="float: right;margin-right: 470px;">
                                <input type="button" id="btn_h_type" value="高级模式">
                                <input type="button" id="btn_l_type" value="普通模式" style="display: none">
                            </span>
                        </div>
                        <input name="forum_id" value="{$forum.id}" type="hidden"/>
                        <input name="theme_id" value="{$posts.id}" type="hidden"/>
                        <input name="author_id" value="{$author.id}" type="hidden"/>
                        <span id="btn">
                        <input name="" type="button" value="h1" id="h1" class="btn" title="1号标题"/>
                        <input name="" type="button" value="h2" id="h2" class="btn" title="2号标题"/>
                        <input name="" type="button" value="h3" id="h3" class="btn" title="3号标题"/>
                        <input name="" type="button" value="h4" id="h4" class="btn" title="4号标题"/>
                        <input name="" type="button" value="h5" id="h5" class="btn" title="5号标题"/>
                        <input name="" type="button" value="b" id="bold" class="btn" title="粗体"/>
                        <input name="" type="button" value="i" id="italics" class="btn" title="斜体"/>
                        <input name="" type="button" value="u" id="underline" class="btn" title="下划线"/>
                        <!--<button type="button" id="apply" class="btn-mini btn-danger">apply</button>--><br/>
                        </span>
                        <p>
                        <textarea id="selectable" name="content" cols="84" rows="8" style="border:1px solid #BDD7E3">
                        </textarea>
                        </p>
                        <p id="container"></p>
                        <php>if(!empty($_SESSION['userInfo'])){echo "<button type='submit'>发表回复</button>";}else{echo "您还没登陆，发表回复<a href='/User/user/login'>请登录</a>";}</php>
                    </form>
                </div>
            </div>
    </div>
    <include file="public:footer"/>
    
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/static/viewback/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function getPositions(){
            var startPosition=endPosition=0;
            var element=document.getElementById('selectable');
            if(document.selection){
                var range=document.selection.createRange();
                var drange=range.duplicate();
                drange.moveToElementText(element);
                drange.setEndPoint('EndToEnd',range);
                startPosition=drange.text.length-range.text.length;
                endPosition=startPosition+range.text.length;alert('ie');
            }
            else if(window.getSelection){
                //firefox chrome safari
                startPosition=element.selectionStart;
                endPosition=element.selectionEnd;//alert(endPosition);
            }
            return {'start':startPosition,'end':endPosition};
        }
        $(document).ready(function(){
             $('#btn_h_type').click(function(){
                CKEDITOR.replace( 'selectable', {
                        uiColor: '#BDD7E3',
                        toolbarCanCollapse:true,
                        language :'zh-cn'
                        //toolbarLocation :''
                });
                $('#btn').css('display','none');
                $('#btn_l_type').css('display','inline');
                $('#btn_h_type').css('display','none');
            });
            $('#btn_l_type').click(function(){
                document.location.reload();
                $('#btn_l_type').css('display','none');
                $('#btn_h_type').css('display','inline');
            });
            /*格式化文本，给文本选中添加样式，例如斜体，粗体*/
            $('#apply').click(function(){
                $('#container').html($('#selectable').val());
            });
            $('.btn').click(function(){
                var positions=getPositions();
                if(positions.start==positions.end){
                    return false;
                }
                var tag=$(this).val();
                var textOnPage=$('#selectable').val();
                var startString=textOnPage.substr(0, positions.start);
                var targetString=textOnPage.substr(positions.start,positions.end-positions.start);
                var formattedString="<" + tag+">" + targetString + "</"+tag+">";
                var endString=textOnPage.substr(positions.end);//alert(endString+'||'+startString+'||'+formattedString);
                $("#selectable").val(startString + formattedString + endString);//alert($("#selectable").val());
            });
            
            $('form#submit_reply').submit(function(){
                if($.trim($('#selectable').val())==''){
                    alert('回复内容不能为空');
                    return false;
                }
            });
            
            $('.edit').click(function(){
                var content=$(this).parent('div').siblings("div.content-div").children('span.content-now').html();
                var root=$(this).parent('div').siblings("div.content-div");
                $(root).children('.content-now').css('display','none');
                $(root).children('.content').css('display','block');
                $(root).children('.content').html(content);
                $(this).parent('div.btn-select').html("<input type='submit' value='提交'/><input type='button' value='取消' onclick='document.location.reload();'/>");
            });
            
        });
    
       </script>
    </body>
</html>
